import logo from '@/assets/logo.png'
import { Checkbox, Form,Input,Button,message } from 'antd'
import { MobileOutlined,LockOutlined } from '@ant-design/icons'
import  styleName from './index.module.scss'
import { login } from '@/store/actions'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
/*
  表单校验时 Form.Item 可以没有 name 属性吗？ 不可以
  什么情况下需要添加 Form.Item 的 valuePropName 属性？
      简单来说，表单元素受控时，操作的不是 value 属性就需要通过该属性来指定
*/
// 总结antd里面表单校验和提交的条件
  // 1. Form要有onFinish事件，事件函数就是提交逻辑(形参就是表单数据)
  // 2. Form.Item 需要name属性
  // 3. Form.Item 需要rules属性，表示验证规则，是数组，值为验证对象，可以多个
  // 4. Form 组件里面有Button组件，且Button组件的htmlType为submit
const Login = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  
  // 表单提交事件
  const submit =async (value)=>{
    const { mobile,code} = value 
    try {
      await dispatch(login(mobile,code))
      history.replace('/')
    } catch (error) {
      console.log(error);
      message.error('登录失败')
    }
  }
  const submitError = (e)=>{
    console.log(e);
  }
  return (
    <div className={styleName.login}>
      <div className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        {/*Form属性 initialValues 为整个表单项的初始值 validateTrigger 表单校验的时机 */}
        {/* Form 有onFinish事件，值为一个函数，提交成功时候会触发，该函数有个形参，就是表单的数据 */}
        {/* Form 有onFinishFailed事件，提交失败的时候会触发(如：表单校验失败) */}
        {/*Form.Item 属性 name 用于规定表单项的数据字段  initialValue 是表单项的初始值 */}
        <Form size='large' initialValues={{ mobile:'13911111111',code:'246810',isAgree: true }} onFinishFailed={ submitError }  onFinish={ submit } validateTrigger={["onChange", "onBlur"]}>
          <Form.Item name="mobile" rules={[{required:true,message:'请输入手机号'}]}>
            <Input prefix={<MobileOutlined />} placeholder="请输入手机号"></Input>
          </Form.Item>
          <Form.Item name="code" rules={[{required:true,message:'请输入验证码'}]} >
            <Input   prefix={<LockOutlined />}  placeholder="请输入验证码"></Input>
          </Form.Item>
          <Form.Item name="isAgree" rules={[{
            validator:(_,value)=>{
              if(value === true) return Promise.resolve()
              else return Promise.reject(new Error('请勾选条款'))
            }
          }]} valuePropName="checked">
            <Checkbox >我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login